<template>
  <div class="order-box">
    <div class="order-num">
      <span>订单号：<i class="order-no">{{order.subOrderNo || order.orderNo}}</i></span>
      <navigator :url="detailUrl" class="detail">查看详情 <i class="inline">&gt;</i></navigator>
    </div>
    <ul>
      <li v-if="order.serviceType" class="flex-box">
        <i class="type">服务类型：</i>
        <i class="flex-1">{{serviceInfo[order.serviceType] && serviceInfo[order.serviceType].name}}</i>
      </li>
      <li v-if="order.serviceItem" class="flex-box">
        <i class="type">服务对象：</i>
        <i class="flex-1">{{order.serviceItem}}</i>
      </li>
      <li v-if="order.phone" class="flex-box">
        <i class="type">联系方式：</i>
        <i class="flex-1">{{order.phone}}</i>
      </li>
      <li v-if="order.serviceDate" class="flex-box">
        <i class="type">服务时间：</i>
        <i class="flex-1">{{order.serviceDate}}</i>
      </li>
      <li v-if="order.serviceDuration">
        <span class="flex-box" v-if="order.serviceType === 'xsg'" ><i class="type">服务时长：</i> {{order.serviceDuration}}小时</span>
        <span class="flex-box" v-else-if="order.serviceType === 'ys'" ><i class="type">服务时长：</i> {{order.serviceDuration}}天</span>
        <span class="flex-box" v-else ><i class="type">服务时长：</i> {{rangeData.serviceDuration[order.serviceDuration]}}</span>
      </li>
      <li v-if="address" class="flex-box">
        <i class="type">服务地址：</i>
        <i class="flex-1 ">{{address}}</i>
      </li>
    </ul>
    <!-- <div v-if="order.orderStatus === 0" class="order-footer succus">工作人员会在24小时内与您取得联系，请保持电话畅通。</div> -->
    <div v-if="order.orderStatus === 0" class="order-footer wait-pay">
      <span class="cancel-order-btn btn" @tap="cancelOrder">取消订单</span>
      <span v-if="order.orderPrice > 0 && ['xsg', 'yezs'].includes(order.serviceType)" class="pay-order-btn btn" @tap="payOrder">支付订单</span>
    </div>
    <div v-if="canAddTime" class="order-footer wait-pay">
      <navigator :url="addTimelUrl" class="add-time-btn btn" >申请加时</navigator>
    </div>
  </div>
</template>
<script>
import getAddress from '@/interface/address/getAddress'
import updateOrder from '@/interface/order/updateOrder'
import payFun from '@/utils/pay'
import {rangeData, serviceInfo} from '@/config'
import dateUtil from '@/utils/dateUtil'

export default {
  props: {
    order: Object,
    refresh: Function
  },
  data () {
    return {
      rangeData,
      serviceInfo,
      address: ''
    }
  },
  computed: {
    detailUrl() {
      if (this.order.serviceType === 'yezs') {
        return `/pages/orderYezsDetail/main?id=${this.order.id}`
      }
      return `/pages/orderDetail/main?id=${this.order.id}`
    },
    addTimelUrl() {
      return `/pages/applyAddTime/main?id=${this.order.id}`
    },
    canAddTime() {
      const {
        serviceType,
        serviceDate,
        orderStatus,
        overtimeStatus,
        serviceDuration
      } = this.order
      if(serviceType === 'xsg' && orderStatus === 1 && overtimeStatus === 0 && serviceDate){
        const nowTime = Date.now();
        const serviceTime = new Date(serviceDate.replace(/-/g, '/')).getTime();
        const serviceEndTime = dateUtil.addHours(new Date(serviceTime), Number(serviceDuration)).getTime()
        return nowTime >= serviceTime && nowTime <= serviceEndTime;
      }
      return false
    }
  },
  methods: {
    getAdress () {
      const addressId = this.order.addressId
      if(addressId){
        getAddress({addressId}).then(data => {
          this.address = data.address
        })
      }
    },
    cancelOrder () {
      uni.showModal({
        title: '取消订单',
        content: '确定要取消此订单吗？',
        success: res => {
          if (res.confirm) {
            updateOrder({
              id: this.order.id,
              orderStatus: 2 // 2 => 已取消
            }).then(v => {
              this.$emit('refresh')
              this.dialog.showToast('取消订单成功', 'success')
            }).catch(msg => { this.dialog.showToast(msg || '取消订单操作失败') })
          }
        }
      })
    },
    payOrder(){
      payFun({
        orderNo: this.order.orderNo,
        subOrderNo: this.order.subOrderNo,
      }, () => {
        this.$emit('refresh')
        this.dialog.showToast('支付成功', 'success')
      })
    }
  },
  created () {
    this.getAdress()
  }
}
</script>

<style lang="less">
  .order-box{
    margin-left: 33upx;
    .order-num{
      height: 74upx;
      line-height: 74upx;
      border-bottom: 1upx solid #ddd;
      font-size: 24upx;
      color:#aaa;
      .order-no{
        display: inline;
        color: #888;
      }
      .detail{
        font-size: 28upx;
        float: right;
        color: #3186ff;
        margin-right: 33upx;
      }
    }
    ul {
      padding-top: 16upx;
      padding-bottom: 28upx;
      li {
        font-size: 28upx;
        color: #333;
        line-height: 60upx;
        .type{
          color:#888;
        }
      }
    }
    .wait-pay{
      text-align: right;
    }
    .succus{
      text-align: center;
    }
    .order-footer{
      padding: 30upx 0 40upx;
      border-top: 1upx solid #ddd;
      font-size: 26upx;
      color: #888;
      .btn{
        display: inline-block;
        border-radius: 4upx;
        width: 240upx;
        height: 70upx;
        line-height: 70upx;
        text-align: center;
        font-size: 28upx;
      }
      .cancel-order-btn{
        border: 2upx solid #ddd;
        color: #333;
        margin-right: 20upx;
      }
      .pay-order-btn{
        background: #c29962;
        color:#fff;
        margin-right: 30upx;
        &.disabled{
          background: #ccc;
        }
      }
      .add-time-btn{
        background: #3186ff;
        color:#fff;
        margin-right: 30upx;
      }
    }
    .info{
      float: left;
    }
  }

</style>
